<template>
    <el-dialog v-model="dialogFormVisible" title='查看申请信息' width="600px" align-center draggable>
        <div class="dialog-content">
            <el-form ref="ruleFormRef" :model="formData" label-width="100px">
                <el-form-item label="编号">
                    <el-input v-model="formData.id" disabled />
                </el-form-item>
                <el-form-item label="申请人">
                    <el-input v-model="formData.student_name" disabled />
                </el-form-item>
                <el-form-item label="申请类型">
                    <el-input v-if="formData.type == 'Bursary'" v-model="formData.bursary_level" disabled />
                    <el-input v-else-if="formData.type == 'Scholarship'" v-model="formData.scholar_level" disabled />
                </el-form-item>
                <el-form-item label="家庭收入" v-if="formData.type == 'Bursary'">
                    <el-input v-model="formData.family_income" disabled />
                </el-form-item>
                <el-form-item label="申请原因">
                    <el-input type="textarea" v-model="formData.reason" disabled />
                </el-form-item>
                <el-form-item label="相关文件" v-if="formData.type == 'Bursary'">
                    <div class="file-links">
                        <template v-for="(url, index) in formData.fileUrls" :key="index">
                            <el-link :href="url" target="_blank">
                                查看文件 {{ getFileName(url) }}
                            </el-link>
                        </template>
                        <span v-if="formData.fileUrls.length === 0">无上传文件</span>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, onBeforeUnmount } from 'vue'
import {
    bus
} from "@/utils/mitt.js"
import { getBursaryFileUrl } from '@/api/apply.js'

// 编辑信息
const formData = reactive({
    id: null,
    student_name: '',
    bursary_level: '',
    family_income: '',
    reason: '',
    fileUrls: [],
    type: '',
})

//根据传递的ID回显数据
bus.on('checkInfoIdB', async (row: any) => {
    Object.keys(formData).forEach((key) => {
        if (key === 'fileUrls') {
            formData[key] = [];
        } else {
            formData[key] = null;
        }
    });
    formData.type = 'Bursary'
    formData.id = row.id
    formData.student_name = row.student_name
    formData.bursary_level = row.bursary_level
    formData.family_income = row.family_income
    formData.reason = row.reason
    const res = await getBursaryFileUrl(row.id)
    formData.fileUrls = res.data.data.map(item => item.file_url);
})
bus.on('checkInfoIdS', async (row: any) => {
    Object.keys(formData).forEach((key) => {
        if (key === 'fileUrls') {
            formData[key] = [];
        } else {
            formData[key] = null;
        }
    });
    formData.type = 'Scholarship'
    formData.id = row.id
    formData.student_name = row.student_name
    formData.scholar_level = row.scholarship_level
    formData.reason = row.reason
})

// 弹窗开关
const dialogFormVisible = ref(false)

// 打开弹窗
const open = () => {
    dialogFormVisible.value = true
}

defineExpose({
    open
})

onBeforeUnmount(() => {
    bus.all.clear()
})

// 从 URL 中提取文件名的函数
const getFileName = (url: string) => {
    const parts = url.split('/');
    return parts[parts.length - 1];
}
</script>

<style lang="scss" scoped>
.dialog-content {
    display: flex;
    padding: 20px 30px;
}

:deep(.el-form-item) {
    margin: 30px;
}

.file-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
</style>